<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <mycom v-on:myfunc="sayHello" v-on:bye="sayBye"></mycom>
    </div>

    <template id="com">
        <div> 
            <h1>这是一个组件com</h1>
            <input type="button" value="点击调用vm传递过来的sayHello，绑定到组件身上" @click="comclick">
            <input type="button" value="点击调用vm传递过来的sayBye，绑定到组件身上" @click="comBye">
            <!-- <input type="button" value="点击从组件往vm身上传值，绑定到组件身上" @click="sendVaule"> -->
        </div>
    </template>  

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'这是vm原始的msg'
            },
            methods:{
                sayHello:function(){
                    console.log('这是vm的sayHello');
                },
                sayBye:function(name,age){
                    console.log('拜拜~' + name + ':' + age);
                },
                // setMsg:function(msg){
                //     this.msg = msg;
                // }
            },

            components:{
                mycom:{
                    template:'#com',

                    methods:{
                        comclick:function(){
                            // 调用从vm身上传递过来的sayHello,只不过应在当前组件接收的时候，这个函数名是func
                            // 在调用从vm身上传递过来的方法时，不能直接使用接收方法的引用名，当函数名使用
                            // 需要使用Vue给哦我们准备的一个叫做$emit，来间接调用
                            this.$emit('myfunc'); //emit是触发的意思
                        },
                        comBye:function(){
                            // $emit的第一个参数，永远是传递过来方法的引用名
                            // 如果调用带参数的方法，那么只需要吧要传递的参数，放在参数列表的第2位，第3位等等就可以
                            this.$emit('bye','小明','21');

                        },
                        // setMsg:function(){
                        //    this.$emit('send','这是组件身上传递的值');
                        // }
                    }
                 },
            }
        })
    </script>
</body>
</html>